<template>
  <div class="dashboard-editor-container">

    <el-tabs v-model="activeName">
      <el-tab-pane label="场景应用价值" name="first">
        <span slot="label"><i class="el-icon-money"></i> 场景应用价值</span>
        <!-- <img src="../assets/images/help/image1.png" class="index_img_3koli" alt="场景应用价值"></img> -->
        <div class="text">数据概览：</div>
        <span>即数据可视化看板，用来展示企业的核心业务指标。神策分析的数据概括集合了多种分析模板，支持多尺寸图标，多指标表格的灵活展示方式，便于您实时查询业务数据</span>
        <div>小象分析上线之初，所有数据概览都处于原始状态，想要查看用户行为数据，需要您手动添加相应的数据指标，生成一份完整的数据概览。</div><br><br>
        <div style="display: flex;align-items:center;justify-content: center;"> <img src="../assets/images/help/01.png"
            class="index_img_1" alt=""></img></div><br>
        <div class="text">帮助您快速生成各平台的基础数据概览</div>
        <div>为了帮助您快速接入，减轻您在创建指标的工作负担，提高利用数据的效率，我们准备了一套标准的预制概览，自动生成一系列常见指标，让您在系统就绪时即可拥有整套的数据监控体系，将更多时间投入到数据探索与分析的工作中。
        </div>
      </el-tab-pane>
      <el-tab-pane label="如何分析" name="second">
        <span slot="label"><i class="el-icon-data-line"></i> 如何分析</span>
        <div class="text">分析要点</div>
        <div>基础数据概览准备了下列数据报表：</div><br>
        <img src="../assets/images/help/02.png" class="index_img_3koli" alt="如何分析"></img><br>
        <div class="box1"> <span>A.实时统计</span></div><br>
        <div class="text1">
          <div class="li">实时统计可以精确到过去1小时的活跃用户数，用时显示环比，同比数据，让您清除掌握用户的活跃变化趋势；</div>
          <div class="li">观察用户全天活跃曲线的高峰期和低谷期的时段分布，让您更直观地了解用户使用习惯</div>
        </div>
        <img src="../assets/images/help/03.png" class="index_img_3koli" alt="如何分析"></img><br>


        <div class="box2"> <span>B.整体规模与趋势</span></div><br>
        <div class="text1">
          <div class="li">考察产品在过去一段时间的用户总量和新增总量，反映出目前产品的运营能力和用户增长速度。</div>
          <div class="li">查看用户在过去一段时间的活跃趋势和新增趋势，让您得悉用户基数在近期是在增长还是下降。</div>
        </div>
        <img src="../assets/images/help/imageB.png" class="index_img_3koli" alt="如何分析"></img>



        <div class="box3"> <span>C.用户生命周期分析</span></div><br>
        <div class="text1">
          <div class="li">用户生命周期根据用户的活跃行为，分析新用户、连续活跃用户、回流用户、沉默用户、与流失用户，可以通过分群功能给运营提供各阶段的目标群体</div>
          <div class="li">新用户反映近期用户活跃中占比，可以看出新用户在活跃用户中的比例，如果比例过高，可能存在虚假繁荣；</div>
          <div class="li">连续活跃用户是产品的忠诚用户，是产品持续活跃的奠基者，需要维护好这部分用户的活跃度；</div>
          <div class="li">回流用户可以看出流失用户返回产品的情况，评估召回老用户的效果；</div>
          <div class="li">流失用户是我们重点关注的部分，需要及时通过运营手段来减少用户流失；</div>
        </div><br>



        <div class="box4"> <span>D.用户设备分析</span></div><br>
        <div class="text1">
          <span>通过对活跃设备的分析，可以考察用户的设备使用偏好，有针对性的优化产品体验。</span>
        </div>
        <img src="../assets/images/help/04.png" class="index_img_3koli" style="width:100%" alt="如何分析"></img>


        <div class="box5"> <span>E.版本迭代分析</span></div><br>
        <span class="text1">通过对活跃设备的应用版本分析，可以了解到产品在用户端的运行情况，监控产品迭代效果。</span><br>
        <img src="../assets/images/help/05.png" class="index_img_3koli" alt="如何分析"></img>



        <div class="box6"> <span>F.App Crash分析</span></div><br>
        <span class="text1">开启采集AppCrashed事件可以收集App在发生崩溃的报错信息，满足日常监控和问题排查的需求。</span><br>
        <img src="../assets/images/help/06.png" class="index_img_3koli" alt="如何分析"></img>



        <div class="box7"> <span>G.关键事件分析</span></div><br>
        <span>除了通用类的日常指标，还可以自定义关键事件进行分析。让您在简单配置后，即可快速了解不同分析维度下，关键指标的数据变化。比如选择[支付成功]事件作为关键事件，会自动生成该事件相关指标，如实时事件发生的次数、新老用户占比、属性值分布等数据图表。</span>
        <img src="../assets/images/help/07.png" class="index_img_3koli" alt="如何分析"></img>
      </el-tab-pane>


      <el-tab-pane label="如何配置" name="third">
        <span slot="label"><i class="el-icon-setting"></i> 如何配置</span>
        <div class="text">1.为了实现分析思路方法李提到的指标体系，还请参考以下埋点方案的设计。</div><br>
        <div class="box7"> <span>启用全埋点</span></div><br>
        <img src="../assets/images/help/08.png" class="index_img_3koli" alt="如何分析"></img><br>


        <div class="text">2.基础数据概览配置</div>
        <span>第一步：根据我们实际的埋点，选择需要分析的客户端。</span><br><br>
        <img src="../assets/images/help/09.png" class="index_img_3koli" style="width:50%" alt="如何分析"></img>

        <span>第二步：基础数据概览默认配置全埋点对应的事件，但也可以替换成更具业务含义的事件，如在App端，[用户活跃]默认使用[App启动]事件，也可以替换成
          为 [浏览产品详情页] 、[阅读资讯] 、[浏览视频] 、[浏览行情]等更更具业务属性的事件；浏览深度等需要使用到session，需要在元数据管理处创建好对应端的session后再进行选择。
        </span>
        <img src="../assets/images/help/10.png" class="index_img_3koli" style="width:55%" alt="如何分析"></img><br>

        <span>第三步：根据实际需求配置关键事件；</span>
        <img src="../assets/images/help/11.png" class="index_img_3koli" style="width:55%" alt="如何分析"></img>

        <span>第四步：点击[确定]创建概览；</span>
        <img src="../assets/images/help/12.png" class="index_img_3koli" alt="如何分析"></img>
      </el-tab-pane>
    </el-tabs>


  </div>
</template>

<script>




export default {
name: 'Index',
components: {

},
data() {
return {
activeName: 'first'
}
},
methods: {

}
}
</script>

<style lang="scss" scoped>
@import ".././assets/styles/mixin.scss";

.index_img_3koli {
  max-width: 90%;
  margin-left: 10px;
  display: block;
  height: auto;
}

.index_img_1 {
  justify-content: center;
}

::v-deep .el-tabs__nav-scroll {
  border-top: 2px solid #dfe4ed;
}

.text {
  font-size: 17px;
  font-weight: 600;
}

.text1 {
  .li::before {
    content: "• ";
  }
}

.box1 {
  background-color: #fe6c5c;
  @include text;
}

.box2 {
  background-color: #f8ba00;
  @include text;
}

.box3 {
  background-color: #6cc353;
  @include text;
}

.box4 {
  background-color: #508dd8;
  @include text;
}

.box5 {
  background-color: #e06c5d;
  @include text;
}

.box6 {
  background-color: #f8ba00;
  @include text;
}

.box7 {
  background-color: #6cc353;
  @include text;
}
</style>
